<template>
  <div class="z-input">
    <div class="label">
      <p class="required" v-if="required">*</p>
      <p>{{label}}</p>
    </div>
    <div class="content">
      <input
        class="input"
        :type="type"
        :placeholder="placeholder"
        v-model="value2"
        :required="required"
        @input="handleOnInput"
        @blur="handleOnBlur"
        @focus="handleOnFocus"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: 'z-input',
  props: {
    label: String,
    required: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    value: {
      type: null
    }
  },
  mounted () {
    this.value2 = this.value;
    window.addEventListener("resize", function () {
      if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
        window.setTimeout(function () {
          document.activeElement.scrollIntoViewIfNeeded();
        }, 0);
      }
    })
  },
  data () {
    return {
      value2: ''
    }
  },
  methods: {
    handleOnInput () {
      this.$emit('input', this.value2);
    },
    handleOnBlur () {
      // console.log(document.activeElement)
      setTimeout(() => {
        document.activeElement.scrollIntoViewIfNeeded();
      }, 200);
      // setTimeout(() => {
      //   console.log(window._input_index)
      //   if (!window._input_focus) {
      //     window.scrollTo(0, document.documentElement.clientHeights)
      //     window._input_index = undefined;
      //   }
      //   if (window._input_index === 0) {
      //     window.scrollTo(0, 0)
      //     window._input_index = undefined;
      //   }
      //   window._input_focus = false
      // }, 200);
    },
    handleOnFocus (e) {
      // console.log(document.activeElement)
      // document.activeElement.scrollIntoViewIfNeeded();
      setTimeout(() => {
        window.scrollTo(0, e.target.offsetTop)
        // if (window._input_index >= 0) {
        //   window._input_index = ++window._input_index;
        // } else {
        //   window._input_index = 0;
        // }
        // window._input_focus = true;
      }, 100);
    }
  }
}
</script>
<style lang="less" scoped>
.z-input {
  font-size: 0.32rem;
  color: #999999;
  margin-bottom: 0.32rem;
  .label {
    width: 100%;
    display: flex;
    .required {
      line-height: 200%;
      margin-right: 4px;
      color: #ff800e;
    }
  }
  .content {
    width: 100%;
    border: 1px solid #dddddd;
    padding: 0.1rem 0.2rem;
    .input {
      width: 100%;
      outline: none;
      border: none;
      font-size: 0.32rem;
    }
  }
}
</style>
